<template>
    <view>
        <view class="reportstore-box">
            <view class="reportstore-title">
                <view class="align-end"></view>
                <view>{{ item.shopName || '' }}</view>
            </view>
            <view class="reportstore-max">
                <view class="reportstore-name">巡检类型：门店巡检</view>
                <view class="reportstore-name">巡检时间：{{ time || '' }}</view>
                <view class="reportstore-name">巡检人员：{{ item.staffName || '' }}</view>
                <view class="reportstore-name">巡检门店：{{ item.shopName || '' }}</view>
                <view class="reportstore-name">巡检地点：{{ shopAddress }}</view>
            </view>
        </view>
        <view class="flexbox-max">
            <view class="flexbox-title">
                <view class="align-end"></view>
                <view class="centers">
                    <text class="zhtitle">店铺评分</text>
                </view>
            </view>
            <view class="comment">
                <view class="flexbox-sb mt-40">
                    <view class="centers">
                        <text class="zhtitle">
                            <text class="xin">*</text>
                            总体评价
                        </text>
                        <view :data-index="index" @tap="onChange" data-type="1" v-for="(item, index) in namelist" :key="index">
                            <image class="icon-28 mr-50" :src="serverindex < index ? item.icon : item.icon1"></image>
                        </view>
                    </view>
                    <view class="text-1">给效果打分</view>
                </view>
                <view class="flexbox-sb mt-40">
                    <view class="centers">
                        <text class="zhtitle">
                            <text class="xin">*</text>
                            环境卫生
                        </text>
                        <view :data-index="index" @tap="onChange" data-type="2" v-for="(item, index) in namelist" :key="index">
                            <image class="icon-28 mr-50" :src="serverindex2 < index ? item.icon : item.icon1"></image>
                        </view>
                    </view>
                    <view class="text-1">给效果打分</view>
                </view>
                <view class="flexbox-sb mt-40">
                    <view class="centers">
                        <text class="zhtitle">
                            <text class="xin">*</text>
                            员工着装
                        </text>
                        <view :data-index="index" @tap="onChange" data-type="3" v-for="(item, index) in namelist" :key="index">
                            <image class="icon-28 mr-50" :src="serverindex3 < index ? item.icon : item.icon1"></image>
                        </view>
                    </view>
                    <view class="text-1">给效果打分</view>
                </view>
                <view class="flexbox-sb mt-40">
                    <view class="centers">
                        <text class="zhtitle">
                            <text class="xin">*</text>
                            员工服务
                        </text>
                        <view :data-index="index" @tap="onChange" data-type="4" v-for="(item, index) in namelist" :key="index">
                            <image class="icon-28 mr-50" :src="serverindex4 < index ? item.icon : item.icon1"></image>
                        </view>
                    </view>
                    <view class="text-1">给效果打分</view>
                </view>
                <view class="flexbox-sb mt-40">
                    <view class="centers">
                        <text class="zhtitle">
                            <text class="xin">*</text>
                            营销活动
                        </text>
                        <view :data-index="index" @tap="onChange" data-type="5" v-for="(item, index) in namelist" :key="index">
                            <image class="icon-28 mr-50" :src="serverindex5 < index ? item.icon : item.icon1"></image>
                        </view>
                    </view>
                    <view class="text-1">给效果打分</view>
                </view>
                <view class="hrs"></view>
                <view class="box" v-if="type === 'add' || (type === 'info' && evatext)">
                    <textarea
                        maxlength="170"
                        :disabled="type === 'info'"
                        :value="evatext"
                        @input="bindTextAreaBlur"
                        class="textarea"
                        placeholder="请写下其他的巡检记录，有利于门店老板更好管理"
                        name="textarea"
                    ></textarea>
                    <text class="text" v-if="type === 'add'">最多170字哦</text>
                </view>
                <view class="mt-30" v-if="type === 'add'">
                    <van-uploader
                        max-count="6"
                        :file-list="fileList"
                        :deletable="true"
                        preview-size="120rpx"
                        @after-read="afterRead"
                        upload-icon="https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/take.png"
                        @delete="ondelete"
                        upload-text="添加照片"
                    ></van-uploader>
                </view>
                <view class="text1" v-if="type === 'add'">{{ fileList.length }}/6</view>
                <view class="mt-30" v-if="type === 'info'">
                    <image :class="'img_box ' + (index !== 0 && index !== 4 ? 'img_active' : '')" :src="item" mode="" v-for="(item, index) in imgList" :key="index"></image>
                </view>
            </view>
        </view>
        <view class="btn" @tap="onEvaluate">{{ type === 'add' ? '提交' : '我已知' }}</view>
        <view class="bot"></view>
    </view>
</template>

<script>
const _request = require('../../utils/request.js'); //获取应用实例

var app = getApp();
export default {
    data() {
        return {
            nameindex: -1,
            shopindex: 4,
            serverindex: 4,
            serverindex2: 4,
            serverindex3: 4,
            serverindex4: 4,
            serverindex5: 4,
            fileList: [],
            urlimg3: '',
            orderId: '',
            evatext: '',
            namelist: [
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                },
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                },
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                },
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                },
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                }
            ],
            type: '',
            item: {},
            time: '',
            baseurl: app.globalData.baseurl,
            info: {},
            imgList: [],
            shopAddress: ''
        };
    },
    onLoad(o) {
        this.setData({
            type: o.type,
            item: JSON.parse(o.item),
            time: this.getNowTimeFull()
        });

        if (o.type === 'info') {
            let data = {};

            if (o.status == '1') {
                data.scheduleId = Number(this.item.id);
            } else {
                data.id = Number(this.item.id);
            }

            _request.postObj('/shopPatrol/getDetailById', data).then((res) => {
                if (res.data.code == 200) {
                    this.setData({
                        serverindex: res.data.data.overallEvaluation - 1,
                        serverindex2: res.data.data.sanitation - 1,
                        serverindex3: res.data.data.clothing - 1,
                        serverindex4: res.data.data.labour - 1,
                        serverindex5: res.data.data.marketAct - 1,
                        evatext: res.data.data.otherContent,
                        imgList: res.data.data.patrolImg && res.data.data.patrolImg.split(','),
                        time: res.data.data.patrolTime && res.data.data.patrolTime.replace('T', ' '),
                        shopAddress: res.data.data.shopAddress
                    });
                }
            });
        }
    },
    methods: {
        getNowTimeFull() {
            var myDate = new Date();
            var year = myDate.getFullYear(); //获取当前年

            var mon = myDate.getMonth() + 1 < 10 ? '0' + (myDate.getMonth() + 1) : myDate.getMonth() + 1; //获取当前月

            var date = myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate(); //获取当前日

            var hour = myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours(); //获取当前时

            var minute = myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes(); //获取当前分

            return year + '-' + mon + '-' + date + ' ' + hour + ':' + minute + ':00';
        },

        onEvaluate() {
            if (this.type === 'info') {
                uni.navigateBack({
                    delta: 1
                });
                return;
            }

            let urls = [];

            for (let i of this.fileList) {
                urls.push(i.url);
            }

            let data = {
                storeId: uni.getStorageSync('storeId'),
                overallEvaluation: this.serverindex + 1,
                sanitation: this.serverindex2 + 1,
                clothing: this.serverindex3 + 1,
                labour: this.serverindex4 + 1,
                marketAct: this.serverindex5 + 1,
                otherContent: this.evatext,
                patrolImg: urls.join(','),
                patrolTime: this.time,
                scheduleId: this.item.id,
                shopId: this.item.shopId
            };

            _request.postObj('/shopPatrol/saveOrUpdate', data).then((res) => {
                if (res.data.code == 200) {
                    uni.showToast({
                        title: '提交成功',
                        icon: 'none'
                    });
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1
                        });
                    }, 2000);
                }
            });
        },

        // 删除图片
        ondelete(e) {
            const { file } = e.detail;
            let list = this.fileList.filter((item) => {
                return item.url != file.url;
            });
            this.setData({
                fileList: list
            });
        },

        // 上传图片
        afterRead(event) {
            let _this = this;

            const { file } = event.detail;
            uni.uploadFile({
                url: this.baseurl + '/store-api/file/upload',
                filePath: file.url,
                name: 'file',
                header: {
                    token: uni.getStorageSync('token') || null
                },
                formData: {
                    user: 'test'
                },

                success(res) {
                    const data = JSON.parse(res.data).data;

                    _this.setData({
                        fileList: [..._this.fileList, { ...file, url: data, deletable: 'true' }]
                    });
                }
            });
        },

        timestampToTime(times) {
            let time = times[1];
            let mdy = times[0];
            mdy = mdy.split('/');
            let month = parseInt(mdy[0]);
            let day = parseInt(mdy[1]);
            let year = parseInt(mdy[2]);
            return year + '-' + month + '-' + day + ' ' + time;
        },

        // 综合点击获取下表
        onChange(e) {
            if (this.type === 'info') {
                return;
            }

            const { index, type } = e.currentTarget.dataset;

            if (type == 1) {
                this.setData({
                    serverindex: index
                });
            } else if (type == 2) {
                this.setData({
                    serverindex2: index
                });
            } else if (type == 3) {
                this.setData({
                    serverindex3: index
                });
            } else if (type == 4) {
                this.setData({
                    serverindex4: index
                });
            } else if (type == 5) {
                this.setData({
                    serverindex5: index
                });
            }
        },

        // 文本输入
        bindTextAreaBlur(e) {
            this.setData({
                evatext: e.detail.value
            });
        }
    }
};
</script>
<style>
.reportstore-box {
    width: 100%;
    /* height: 410rpx; */
    border-bottom: 20rpx solid #f1f1f1;
    /* padding: 20rpx 0; */
}

.reportstore-max {
    padding: 20rpx 40rpx;
    /* height: 320rpx; */
}

.align-end {
    width: 8rpx;
    height: 8rpx;
    background: #e94a18;
    border-radius: 50%;
    margin-right: 10rpx;
    margin-left: 40rpx;
}

.reportstore-title {
    height: 100rpx;
    display: flex;
    align-items: center;
    line-height: 100rpx;
    border-bottom: 1rpx solid #e5e5e5;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.reportstore-name {
    width: 662rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    margin-top: 10rpx;
    line-height: 50rpx;
}
/* pages/comment/index.wxss */
.page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* 地点 */
.name {
    width: 710rpx;
    height: 180rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
}
.centers {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0rpx;
}
.title {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.zhtitle {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
    width: 144rpx;
    margin-right: 40rpx;
}

/* 评价 */
.comment {
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    padding: 0rpx 40rpx;
    box-sizing: border-box;
    position: relative;
}

.box {
    position: relative;
}

.hrs {
    margin: 22rpx 0 30rpx 0;
}

.textarea {
    width: 670rpx;
    height: 200rpx;
    background: #fbfbfb;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    padding-bottom: 40rpx;
}

.text {
    height: 28rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 28rpx;
    position: absolute;
    bottom: 10rpx;
    right: 20rpx;
    z-index: 1;
}

.text-1 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

/* 发布按钮 */
.btn {
    margin: 80rpx auto;
    width: 670rpx;
    height: 84rpx;
    background: #e94a18;
    border-radius: 21px;
    text-align: center;
    line-height: 84rpx;
    color: white;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
}
.mr-30 {
    margin-right: 45rpx;
}
.mr-50 {
    margin-right: 40rpx !important;
}
.mt-30 {
    margin-top: 45rpx;
}
.bot {
    width: 750rpx;
    height: 1rpx;
}

.text1 {
    height: 28rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 28rpx;
    position: absolute;
    bottom: 50rpx;
    right: 50rpx;
    z-index: 1;
}
.flexbox-sb {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
}
.flexbox-title {
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
}

.flexbox-max {
    background-color: #fff;
}
.img_box {
    width: 123rpx;
    height: 123rpx;
}
.img_active {
    margin-left: 59rpx;
}
.xin {
    color: rgba(233, 74, 24, 1);
}
</style>
